<template>
  <div>
    <!-- 面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-table :data="PermissionList" :border="true" :stripe="true"
        :header-cell-style="{'text-align':'center','font-weight':'700','color':'#606266'}"
        :cell-style="{'text-align':'center'}">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="权限名称" prop="AuthName"></el-table-column>
        <el-table-column label="Path" prop="Path"></el-table-column>
        <el-table-column label="Level">
          <template slot-scope="scope">
            <el-tag type='success' v-if='scope.row.Level===1'>LEVEL1</el-tag>
            <el-tag type='warning' v-else-if='scope.row.Level===2'>LEVEL2</el-tag>
            <el-tag type='danger' v-else>LEVEL3</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        PermissionList: []
      }
    },
    created() {
      console.log('Rights的created被执行')
      // 获取所有权限
      this.getPermissionList()
    },
    methods: {
      async getPermissionList() {
        const {
          data: res
        } =
        await this.$http.get('/Permission/GetPermissionList', {
          params: {
            type: 'list'
          }
        })
        console.log('111111')
        console.log(res.data.permission)
        if (res.meta.status !== 200) {
          return this.$message.error('获取权限列表失败')
        }
        this.PermissionList = res.data.permission
      }
    }

  }

</script>

<style lang="less" scoped>

</style>
